<template>
	<view>
		<view class="sign-container">
			 <view class="sign-content">
				 <view class="sc-avatar">
					 <img :src="trainneInfo.image" alt="" style=" border-radius: 50%; width: 100%; height: 100%;">
				 </view>
				 <view class="sc-right">
					 <view class="sc-name">{{trainneInfo.name}}</view>
					 <view class="sc-idnum">ID:{{trainneInfo.id}}</view>
				 </view>
			 </view>
			 <view class="sign-code">
				 <canvas canvas-id="qrcode" style="width:300px;height:300px;margin:0 auto;"></canvas>
				
			 </view>
			 <view class="sign-tip">
				 刷卡签到，请出示此签到二维码
			 </view>
		</view>
	</view>
</template>

<script>
	 import QRCode  from '@/components/uqrcode.js'
	export default {
		data() {
			return {
				trainneInfo:uni.getStorageSync('trainneInfo'),
				 QRCodeMsg:"",
			} 	 	
		},
		onLoad() {
			console.log("trainneInfo",this.trainneInfo.id);
			const params = {
				id:'1'
			}

					this.createQrcode();
			
		},
		methods: {
				// 生成二维码
						createQrcode(text){
					
							// console.log("text",JSON.stringify(text));
							  let qrcode = new QRCode('qrcode',{ 
							             text: JSON.stringify(text),
							             width: 300,
							             height: 300,
							             colorDark: '#000', //二维码主题颜色
							             colorLight: '#000', //二维码背景颜色
							             correctLevel: QRCode.CorrectLevel.H
							         });

						},
						
					
		}
	}
</script>

<style>
.sign-container{
	width: 95%;
	/* height: 800rpx; */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: #ffffff;
	border-radius: 8rpx;
}
.sign-content{
	display: flex;
}
.sc-avatar{
	width: 100rpx;
	height: 100rpx;
	margin-top: 30rpx;
	margin-left: 30rpx;
}
.sc-right{
	margin-top: 30rpx;
	margin-left: 20rpx;
}
.sc-name{
	font-weight: bold;
}
.sc-idnum{
	color: #b1b1b1;
	margin-top: 10rpx;
}
.sign-code{
	width: 90%;
	height: 600rpx;
	margin: 30rpx auto;
}
.sign-tip{
	text-align: center;
	color: #b1b1b1;
	padding-bottom: 40rpx;
}
</style>
